<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-input-inline {
            vertical-align: middle;
            line-height: 36px;
            color: #999;
            text-align: left;
            padding-left: 9px;
        }
    </style>
</head>
<body style="padding:4px;overflow:hidden">
<div class="layui-form  layui-form-pane" style="text-align:center;" id="ability-form">

    <div class="layui-upload-drag" disabled="true" style="width:600px;margin-top:50px;background:#f5f5f5" id="file">
        <i class="layui-icon"></i>
        <p>点击上传，或将JAR拖拽到此处</p>
    </div>
    <div id="shade" style="display:none;width:100%;height:600px;position:absolute;top:0;left:0;background:#fff;opacity:0.4;">
    </div>
    <div class="layui-progress layui-progress-big" style="display:none;margin:0 30px;position:relative;top:-26px;" lay-showpercent="true"
         id="uploadProcessBar" lay-filter="uploadProcessBar">

        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
    <div id="packageInfo" style="display:none">

        <div class="layui-form-item">
            <label class="layui-form-label">jar名称</label>
            <input type="hidden" id="id">
            <div class="layui-input-inline" id="jarName">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务编码</label>
            <div class="layui-input-inline" id="serviceName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">版本</label>
            <div class="layui-input-inline" id="version">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分支</label>
            <div class="layui-input-inline">
                <input type="text" name="branch" id="branch" lay-verify="required|branch"
                       autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width:120px;">自动升级实例</label>
            <div class="layui-input-inline" style="width:80px">
                <input type="checkbox" name="auto" id="auto" lay-filter="auto" value="1" lay-verify="auto"
                       lay-skin="switch" lay-text="自动|手动">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button class="layui-btn" id="saveBtn" lay-submit="" lay-filter="saveBtn">立即提交</button>
        </div>
    </div>

</div>


<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload', 'oka', 'element'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload
            , element = layui.element
            , oka = layui.oka;
        //alert(location.hash);
        //自定义验证规则

        var hash = location.hash;
        if (hash != "") {
            var readonly = false;
            hash = hash.substring(1);
            if (hash.substring(0, 1) == "!") {
                hash = hash.substring(1);
                readonly = true;
            }
            oka.loading.open();
            $.ajax({
                url: "/admin/ability/" + hash
                , type: "GET"
                , async: true
                , success: function (res) {
                    oka.loading.close();
                    if (!res)
                        return;
                    //obj = null;

                    var data = res;

                    if (data.state == "on") {
                        $("#state").prop("checked", true);
                    }
                    if (data.isPrivate == true) {
                        $("#isPrivate").prop("checked", true);
                    }
                    $('#ability-form').find('[name]').each(function () {
                        var s = data[$(this).attr('name')];

                        if (s != undefined) {
                            // console.log($(this).attr('name'))
                            if (readonly) {
                                $(this).attr("disabled", true);
                            }

                            $(this).val(s);
                        }

                    });
                    if (readonly) {
                        $("#saveBtn").attr("disabled", true);
                        $("#saveBtn").addClass("layui-btn-disabled");
                    }
                    form.render();
                }
            });
        }
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }
        upload.render({
            elem: '#file'
            , url: '/package/add'
            , accept: 'file'
            , exts: 'jar'
            , xhr: xhrOnProgress
            , before: function (e) {
                //console.log(e);
                //console.log(document.querySelector("[name=file]").parentNode)
                $('#uploadProcessBar').show();
                $('#shade').show();
                $('#file').html(document.querySelector("[name=file]").value + "，正在上传...");


            }
            , progress: function (value) {
                element.progress('uploadProcessBar', value + '%');
                // console.log(value);
            }
            , done: function (res) {
                $('#uploadProcessBar').hide();
                $('#shade').hide();

                if (res != "0") {
                    $('#file').hide();
                    var jarPackage = res;
                    oka.page.jarPakcage = jarPackage;
                    $("#file").hide();
                    $("#packageInfo").show();
                    $("#jarName").html(jarPackage.jarName);
                    $("#serviceName").html(jarPackage.serviceName);
                    $("#version").html(jarPackage.version);
                    $("#branch").val(jarPackage.branch);
                    $("#id").val(jarPackage.id);


                } else {

                    layer.msg('上传失败!!！', {
                        offset: "t",
                        anim: 6
                    });
                }
                console.log(res)
            }
        });
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , content: function (value) {
                alert(value)
            }
        });

        form.on('switch(state)', function (data) {
            $("#state").prop("value", this.checked ? 'on' : 'off');
        });
        form.on('switch(isPrivate)', function (data) {
            $("#isPrivate").prop("value", this.checked ? true : false);
        });
        //监听提交

        form.on('submit(saveBtn)', function (data) {
            oka.loading.open();
            // console.log(data.field.isPrivate)
            var jarPackage = oka.page.jarPakcage;
            $.ajax({
                url: "/package/commit?branch=" + $("#branch").val()
                , type: "POST"
                , contentType: "application/json"
                , async: true
                , data: JSON.stringify(jarPackage)
                , success: function (res) {
                    oka.loading.close();
                    alert(res)
                    if (res == "0") {
                        layer.msg('操作失败!!！', {
                            offset: "t",
                            anim: 6
                        });

                    } else {

                        layer.msg('操作成功', {
                            time: 600
                        }, function () {
                            parent.oka.page.ret = JSON.stringify(jarPackage);
                            parent.layer.close(parent.layer.index);
                        });

                    }
                }
            });


            return false;
        });


    });
</script>

</body>
</html>